<template>
	<view class="content">
		<view class="errormsgDiv" v-if="nodata">
			<view class="errormsg">\（￣︶￣）/</view>
			<view class="errormsg2">您暂时还没有发布产品</view>
		</view>
		<view class="goods-list" v-else>
			<view class="goods-item" @click="navToDetailPage(goodsItem)" v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsIndex">
				<view class="goods-box-single">
					<image class="goods-img" :src="goodsItem.default_img + '?imageView2/1/w/360/h/360'" mode="aspectFill"></image>
					<view class="right">
						<text class="title clamp">{{ goodsItem.goods_name }}</text>
						<view class="attr-box" v-if="goodsItem.extend">销量 {{goodsItem.extend.order_count}}  好评率 {{goodsItem.extend.good_reputation_rate}}%</view>
					
						<text class="price">¥ {{ goodsItem.price }}</text>
						<view class="action-box">
							<!-- <text class="lg cuIcon-servicefill"></text>极客修... -->
							<!-- <text class="mgl5">接单率78% </text>
							<text  class="mgl5">平均2分钟接单</text> -->
							<view v-if="goodsItem.status == 2" class="cu-tag round bg-orange light">已下架</view>
							<view v-if="goodsItem.status == 1" class="cu-tag round bg-blue light">已发布</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		 <view style="height: 80upx;"></view>
		<navigator  url="/pages/product/add"   class="fixed-btn cu-btn block bg-blue lg"  >发布服务</navigator>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			cateMaskState: 0, //分类面板展开状态
			headerPosition: 'fixed',
			nodata: 0,
			headerTop: '0px',
			loadingType: 'more', //加载更多状态
			filterIndex: 0,
			page: 1,
			cateId: 0, //已选三级分类id
			priceOrder: 0, //1 价格从低到高 2价格从高到低
			cateList: [],
			goodsList: [],
			order: 'MallGoods.id desc'
		};
	},

	onLoad(options) {
		beeApp.getUserInfo(info => {
			this.userInfo = info;
			this.loadData();
		});
	},

	//下拉刷新
	onPullDownRefresh() {
		this.loadData(1);
	},
	//加载更多
	onReachBottom() {
		this.loadData();
	},
	onShow: function() {
		var reload = beeApp.getPageData('pages/product/list', 'reload');
		if (reload == 1) {
			beeApp.setPageData('pages/product/list', { reload: 0 });
			this.loadData(1);
		}
	},

	methods: {
		setData: function(item) {
			for (var i in item) {
				this[i] = item[i];
			}
		},
		//加载商品 ，带下拉刷新和上滑加载
		loadData(reload = 0) {
			var that = this;

			if (reload == 1) {
				this.setData({
					loading: 0,
					page: 1,
					lastpage: 0,
					goodsList: []
				});
			}

			var page = this.page;
			if (this.loading == 1 || this.lastpage == 1) {
				//console.log(this.data);
				return;
			}
			this.loading = 1;
			beeApp.api(
				'mall/goods/get',
				{
					page: 1,
					limit: 30,
					user_id: this.userInfo.user_id,
					order: this.order,
					shop_id:328,
					fields: 'id,goods_name,total_stock,origin_price,price,sub_title,order_count,shop_id,default_img,status,MallGoods.user.extend'
				},
				function(res) {
					that.loading = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					if (res.data.list.length == 0) {
						that.lastpage = 1;
					}
					that.page++;
					that.setData({
						goodsList: that.goodsList.concat(res.data.list)
					});
					if (that.goodsList.length === 0) {
						that.nodata = 1;
					} else {
						that.nodata = 0;
					}
				}
			);
		}, //详情
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.id;
			uni.navigateTo({
				url: `/pages/product/product?id=${id}`
			});
		},

		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
}

/* 商品列表 */
/* 单条商品 */
.goods-item {
	background-color: #fff;
	margin-bottom: 10upx;
	position: relative;
}
.goods-box-single {
	display: flex;
	padding: 20upx 6upx;

	.goods-img {
		display: block;
		width: 120upx;
		height: 120upx;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 30upx 0 24upx;
		overflow: hidden;
		.title {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			line-height: 1;
		}
		.attr-box {
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			padding: 10upx 0upx;
		}
		.price {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			
		}
	}
}
.mgl5 {
	margin-left: 5px;
}
.action-box {
	position: absolute;
	right: 20upx;
	top: 80upx;
	height: 60upx;
	font-size: $font-sm + 2upx;
	color: $font-color-light;
}
</style>
